@import "../../../base/base";
@prefix:reason;
.@{prefix}{
  background-size: cover!important;
  .@{prefix}-container{
    max-width:@box-width;
    margin:0 auto;
    padding-top: 1px;
    padding-bottom: 120px;
    @media screen and (min-width:1024px) and (max-width: 1200px){
      padding-left: 20px;
      padding-right: 20px
    };
    .max-media(1024px,{padding-left: 10px;padding-right: 10px});
    h1{
      .title(#666);
    }
    .@{prefix}-slide-container {
      position: relative;
      .@{prefix}-panel {
        text-align: center;
        background: @base-color;
        color: #fff;
        min-height: 460px;
        padding: 0 10px;
        width: 224px;
        .max-media(767px,{min-height: 330px});
        .max-media(450px,{width: 100%!important;});
        h3 {
          font-size: 36px;
          color: #fff;
          margin: 20px 0 10px;
        }
        .@{prefix}-title {
          font-size: 18px;
          position: relative;
          margin-bottom: 70px;
          &:after {
            position: absolute;
            content: "";
            width: 35px;
            height: 5px;
            bottom: -20px;
            left: 50%;
            .translate(-50%, 0);
            background: #fff;
          }
        }
        .@{prefix}-content {
          text-align: left;
        }
      }
      .@{prefix}-button {
        top: auto;
        bottom: -80px;
        width: 48px;
        height: 48px;
        border-radius: 50%;
      }
      .@{prefix}-prev{
        background: url("./img/prev.png") no-repeat center;
        left:50%;
        .translate(-80px,0);
      }
      .@{prefix}-next{
        background: url("./img/next.png") no-repeat center;
        right:50%;
        .translate(80px,0);
      }
    }
  }
}